iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

30天的css animation修練系列 第 4

初探 css animation - 時間軸跟關鍵影格

  • 分享至 

  • xImage
  •  

好的,在上篇說明完動畫屬性後
要進到時間軸跟關鍵影格的部分了

關鍵影格的定義用 @keyframes
時間軸有兩種寫法,基本上 from 等同於 0% , to 等同於 100%。(但整個時間軸的長度)
1.from、n%、to
2.0%、n%、100%

使用第一天的 css 來做說明
我的元件寬度為 20px,當游標滑入時動畫開始
假設說我初始寬度是 50px ,在過程一半的時候寬度增加到 100px ,最後結束時寬度是 150px 。
就會如下方表示:

/*這是元素樣式 這裡可以自行設定各種想要的值*/
.lazydog{
  background-color:#ff4141;
  color:#fff;
  padding:20px;
  margin:auto;
  width:50px;
  text-align:center;
}

/*滑入時動畫開始*/
.lazydog:hover{
  animation: my-animate 2s infinite;
  
}

/*設定動畫內的時間軸囉 記得keyframes這邊要打s*/
@keyframes my-animate{
    from{
      width:50px;
    }
    50%{
      width:100px;
    }
  
    to{
      width:150px;
    }
}
/*另一種寫法會長這樣 但基本上效果是一樣的*/
@keyframes my-animate{
    0%{
      width:50px;
    }
    50%{
      width:100px;
    }
  
    100%{
      width:150px;
    }
}

如果混用 0% 、 50% 、 to 或 from 、 50% 、100% ,其實也是有效果的,只是個人不建議這樣寫。
看起來比較亂除非是故意想要挖坑給別人XD

今天這篇的codepen的網址如下,有興趣的人可以試試效果
https://codepen.io/UHU/pen/mzRLPN

下篇來談談
@keyframes 除了這篇出現的 width ,還可以寫什麼在裡面咧
進擊的 @keyframes 襲來


上一篇
初探 css animation - 來勢洶洶的動畫屬性(下)
下一篇
初探 css animation - 進擊的 @keyframes 襲來
系列文
30天的css animation修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言